<template>
  <div id="container" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// import { shallowRef } from '@vue/reactivity'
import img1 from '@/assets/icons/svg/purple.png'
import { list } from "@/api/monitor/online";
import { listDevice, upDatelistDevice, getDevice, getDeviceRainData, getDeviceLevelData } from "@/api/screen/device";

export default {

  data() {
    return {
      // map: shallowRef(null)
      disProvince: '',
      adCode: 130000,
      depth: 2,
      colors: {},
      // map: shallowRef(null),
      // 查询参数
        queryParams: {
        ipaddr: undefined,
        userName: undefined
      },
      // 表格数据
      list: [],
      // 遮罩层
      loading: true,
      nameOne: '',
      dataOne: '',
      newData: 114
    }
  },
  created() {
    
    console.log('地图页面')
    // this.initMap()
    // this.initPro()
    // this.getColorByAdcode()
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      listDevice({isAsc:'desc', orderByColumn:'createTime'}).then(response => {
        console.log('地图数据------------', response.rows )
        this.list = response.rows;
        console.log('this.list', this.list)
        this.nameOne = this.list[0].os
        this.dataOne = this.list[0].browser
        this.total = response.total;
        this.loading = false;
        this.initMap()
      });
    },
    /** 查询降雨量设备数据详情 */
    getDeviceRainData(e) {
      this.loading = true;
      getDeviceRainData({deviceId:e, isAsc:'desc', orderByColumn:'createTime'}).then(response => {
        console.log('deviceRainDataList',response.rows) 
        this.loading = false
        let resList = response.rows
        this.deviceRainDataList = resList.reverse()
        this.chartRiqi = this.deviceRainDataList.map(item=> {return item.createTime})
        this.chatData = this.deviceRainDataList.map(item=> {return item.tag})
        console.log('this.chatDataRain', this.chatData, this.chartRiqi)
        }
      );
    },
     /** 查询水位设备数据详情 */
    getDeviceLevelData(e) {
      this.loading = true;
      getDeviceLevelData({deviceId:e, isAsc:'desc', orderByColumn:'createTime'}).then(response => {
        console.log('deviceLevelDataList',response.rows) 
        this.loading = false
        let resList = response.rows
        // resList.reverse()[0].v1 = this.newData
        this.newData = resList[0].v1
        
        console.log('resList.reverse()', resList.reverse())
        console.log('this.newData', this.newData)
        
        // this.chartRiqi = this.deviceLevelDataList.map(item=> {return item.createTime})
        // this.chatData = this.deviceLevelDataList.map(item=> {return item.tag})
        // console.log('this.chatData', this.chatData, this.chartRiqi)
        console.log('this.chatDataLocation')
        }
      );
    },
   
    initMap() {
      let _this = this
      AMapLoader.load({
        // key: 'b227b92322ed5b5c20c236fc6ff2a362', // 申请好的Web端开发者Key，首次调用 load 时必填
        // key: 'f549f9a190bc5940a2bf024bb070738b', // 申请好的Web端开发者Key，首次调用 load 时必填
        key: '443027a201a9e28cd7e4c99e221e4e60', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.ControlBar', 'AMap.ToolBar', 'AMap.InfoWindow', 'AMap.PolyEditor', 'AMap.Driving', 'AMap.Polyline'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        var map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          center: [119.313268,26.028068], // 初始化地图中心点位置
          terrain: true, // 开启地形图
          pitch: 0, // 角度
          showBuildingBlock: false,
          resizeEnable: true,
          animateEnable: false, // 禁用地图的动画效果
          layers: [new AMap.TileLayer.Satellite(), // 路网
            new AMap.TileLayer.RoadNet()]
        })

         /** 查询降雨量设备数据详情 */
        

        // 设置地图中心点
        // var center = [119.296411,26.074286]; // 设置中心点的经纬度坐标
        // map.setCenter(center);
        

        // const marker = new AMap.Marker({
        //   // 福州南坪
        //   position: new AMap.LngLat(118.702736,25.884944),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30)
        // })

        // const marker1 = new AMap.Marker({
        //   // 福州关西
        //   position: new AMap.LngLat(119.171675,26.192221),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30)
        // })

        const icon2 = new AMap.Icon({
          // image: '//webapi.amap.com/theme/v1.3/markers/b/mark_b.png',
          image: img1,
          size: new AMap.Size(32, 32),
          imageSize: new AMap.Size(30, 30)

        }) // 更改图标2的样式

        let markerList = []
        
        let locationList = [
          // lng 经度     // lat 纬度
          // {longtitude: 119.171675, lantitude: 26.192221, deviceName: '泥位计'}, 
          // {longtitude: 118.702736, lantitude: 25.884944, deviceName: '雨量计'}
        ];

        // locationList = this.list

        console.log('locationList', locationList)
        // 添加marker
        this.list.map((item) => {
          // let state = item.cp;
          // let marker = new AMap.Marker({
          let marker = new AMap.Marker({
            position: [item.longtitude, item.lantitude ], //位置
            // position: [119.171675,26.192221], //位置
            offset: new AMap.Pixel(-10, -10),
            map: map,
            icon: icon2, // 添加 Icon 图标 URL
          })
         
          marker.on('click', function() {
            console.log('item.monitorDeviceName', item.monitorDeviceName, item, item.deviceId)
            if(item.monitorDeviceName == '表面位移') { console.log('1')}
            if(item.monitorDeviceName == '库水位') { _this.getDeviceLevelData(item.deviceId)}
            if(item.monitorDeviceName == '浸润线') { console.log('3')}
            if(item.monitorDeviceName == '雨量') { console.log('4')}

            var infoWindow = new AMap.InfoWindow({
              // anchor: 'top-left',
              content: `<div class="markerClass">设备名称:${item.deviceName || 0 }  <br>采集数值: ${_this.newData}  <br>采集时间:2024-12-08 16:09:36 </div>`,
              offset: new AMap.Pixel(-10, -10)
            })

            infoWindow.open(map, marker.getPosition())
            console.log('marker.getPosition', marker.getPosition)
            map.on('click', function(e) {
            // 关闭信息框
              infoWindow.close();
            });
          });
        //     console.log('marker-on')
          console.log('marker', marker)
          
          map.add([marker])
        //   // markerList.push(marker)
        })
        // map.add(marker);
        console.log('markerList', markerList)
        // map.add(markerList)

        // 鼠标点击marker弹出自定义的信息窗体
        // marker.on('click', function() {
        //   console.log('marker', this.marker)
        //   infoWindow.open(map, marker.getPosition())
        //   // infoWindow.open(this.map, [116.401337,39.907886]);
        // })


        // const marker2 = new AMap.Marker({
        //   // 福州关西
        //   position: new AMap.LngLat(119.171675,26.192221),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30),
        //   icon: icon2
        // })

        // const marker3 = new AMap.Marker({
        //   // marker3
        //   position: new AMap.LngLat(116.839534, 36.942455),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30)
        // })

        // const marker4 = new AMap.Marker({
        //   // marker4
        //   position: new AMap.LngLat(121.813076, 37.209476),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30)
        // })

        // const marker5 = new AMap.Marker({
        //   // marker5
        //   position: new AMap.LngLat(117.633591, 34.354439),
        //   // 将 html 传给 content
        //   // 以 icon 的 [center bottom] 为原点
        //   offset: new AMap.Pixel(-13, -30)
        // })

        // AMap.event.addListener(map, 'click', getLnglat);
        // this.getList();
        // 构建自定义信息窗体
      

        // var infoWindow = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   content: `'<div class="markerClass">设备名称:${e}  <br>采集数值: 0.0000  <br>采集时间:2023-11-22 14:00:01</div>`,
        //   offset: new AMap.Pixel(-10, -30)
        // })

        // var infoWindow1 = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   content: '<div class="markerClass">设备名称:福州关西变电站  <br>采集数值: 0.0000  <br>采集时间:2023-11-22 14:00:01</div>'
        // })

        // var infoWindow2 = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   // content: '<div class="markerClass">设备名称:福州关西变电站设备  <br>采集数值: 0.0000  <br>采集时间:2023-11-22 14:00:01</div>'
        //   content: `<div class="markerClass">设备名称:${this.nameOne}  <br>采集数值: ${this.dataOne}  <br>采集时间:2023-11-22 14:00:01</div>`
          
        //   // content: this.nameOne
        // })

        // var infoWindow3 = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   content: '<div class="markerClass">marker3</div>'
        // })

        // var infoWindow4 = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   content: '<div class="markerClass">marker4</div>'
        // })

        // var infoWindow5 = new AMap.InfoWindow({
        //   anchor: 'top-left',
        //   content: '<div class="markerClass">marker5</div>'
        // })

        // infoWindow.open(this.map,[116.401337,39.907886])

        // var one = infoWindow.open(this.map, [108.998736, 34.216224])
        // var two = infoWindow.open(this.map, [116.397428, 39.90923])

        
        // map.on('click', function(e) {
        // // 关闭信息框
        //   infoWindow.close();
        // });

        // map.on('click', function(e) {
        // // 关闭信息框
        //   infoWindow2.close();
        // });

        // marker.addListener("click", () => {
        //   infowindow.open({
        //     anchor: marker,
        //     map,
        //   });
        // });

        // marker1.on('click', function(e) {
        //   infoWindow1.open(map, marker1.getPosition())
        //   // infoWindow.open(this.map, [116.397428, 39.90923]);
        //   // infoWindow.open(this.map, [116.401337,39.907886]);
        // })

        // marker2.on('click', function(e) {
        //   infoWindow2.open(map, marker2.getPosition())
        // })

        // marker3.on('click', function(e) {
        //   infoWindow3.open(map, marker3.getPosition())
        // })

        // marker4.on('click', function(e) {
        //   infoWindow4.open(map, marker4.getPosition())
        // })

        // marker5.on('click', function(e) {
        //   infoWindow5.open(map, marker5.getPosition())
        // })

        // map.add(marker)

        // function blinkMarker() {
        //   const marker = document.querySelector('.marker-icon')
        //   marker.style.animation = 'blink-animation 1s infinite'
        // }

        // setInterval(blinkMarker, 1000)

        // 关闭信息窗体
        // function closeInfoWindow() {
        //     map.clearInfoWindow();
        // }
        // function markerClick(e) {
        //   infoWindow.setContent(e.target.content)
        //   infoWindow.open(map, e.target.getPosition())
        // }
        
        // 定义$
        let $ = function(elementId) {
          return document.getElementById(elementId)
        }

        // 鼠标悬浮显示经纬度
        let lnglatInput = $('lnglat')
        map.on('mousemove', function(e) {
          // console.log('e', e)
          // console.log('e.lnglat.lng', e.lnglat.lng)
          // console.log('e.lnglat.lat', e.lnglat.lat)
          // lnglatInput.value = ${'经度': e.lnglat.lng.toString(), '维度': e.lnglat.lat.toString() }
          lnglatInput.value = '经度' + e.lnglat.lng.toString() + ' , ' + ' 维度 ' + e.lnglat.lat.toString()
        })

        // map.add([ marker2])
      // }).catch(e => {
      //   console.log(e)
      // })
        
      }).catch(e => {
        console.log(e)
      })
    }
    // 创建省份图层

    // initPro(code, dep) {
    //   dep = typeof dep === 'undefined' ? 2 : dep
    //   this.adCode = code
    //   this.depth = dep

    // disProvince && disProvince.setMap(null)

    // disProvince = new AMap.DistrictLayer.Province({
    //   zIndex: 12,
    //   adcode: [code],
    //   depth: dep,
    //   styles: {
    //     'fill': function(properties) {
    //       // properties为可用于做样式映射的字段，包含
    //       // NAME_CHN:中文名称
    //       // adcode_pro
    //       // adcode_cit
    //       // adcode
    //       var adcode = properties.adcode
    //       return getColorByAdcode(adcode)
    //     },
    //     'province-stroke': 'cornflowerblue',
    //     'city-stroke': 'white', // 中国地级市边界
    //     'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
    //   }
    // })

    // disProvince.setMap(map)
    // },

    // 颜色辅助方法

    // getColorByAdcode(adcode) {
    //   if (!colors[adcode]) {
    //     var gb = Math.random() * 155 + 50
    //     colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)'
    //   }

    //   return colors[adcode]
    // }
  }
}






// const map = shallowRef(null);
// import { reactive } from "vue";

// const state = reactive({
//   path: [],
//   current_position: []
// });

// initMap();
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

.markerClass{
       margin-left: 100px;
       margin-top: 100px;
       width: 18px;
       height: 18px;
       /*transform: translate3d(0px, 0px, 0px);*/
       position: relative;
       outline: none;
       background-color: #dd524d;
       box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
       border-radius: 100%;
       transform-origin: 0 0;
       display: block;
       opacity: 0.7;
   }
   .markerClass::after {
       content: "";
       -webkit-border-radius: 100%;
       border-radius: 100%;
       height: 300%;
       width: 300%;
       position: absolute;
       margin: -100% 0 0 -100%;
       box-shadow: 0 0 6px 2px #dd524d;
       animation: pulsate 1s ease-out;
       animation-iteration-count: infinite; /*无穷反复*/
       animation-delay: 1.1s;
   }
   @keyframes pulsate {
       0% {
           transform: scale(0.1, 0.1);
           opacity: 0;
           filter: alpha(opacity=0);
       }
       50% {
           opacity: 1;
           filter: none;
       }
       100% {
           transform: scale(1.2, 1.2);
           opacity: 0;
           filter: alpha(opacity=0);
       }
   }

</style>
